/
<template>
  <view class="flex-col page">
    <view class="flex-col justify-start section">
      <view class="flex-col section_2">
        <view class="flex-row justify-between items-center section_3"></view>
        <view class="flex-row justify-center items-center relative section_4">
          <image class="image_4 pos" src="@/static/common/i-back-two.png" @click="backToDrama" />
          <text class="text">{{ badgeDetail.title }}</text>
          <view class="flex-col justify-start items-center text-wrapper pos_2" @click="openUpGradeModal">
            <text class="font_2 text_2">{{ $t('common.upgrade') }}</text>
          </view>
        </view>

        <!-- 背景图片 -->
        <view class="flex-col section_5 align-center">
          <image class="image_5" src="@/static/common/i-kingBadge.png" />
          <view class="mt-16 flex-col group mb-16">
            <view class="mt-14 flex-row justify-between items-center self-stretch">
              <view class="flex-row items-center section_6">
                <view class="flex-col justify-start items-center shrink-0 text-wrapper_2">
                  <text class="font_2 text_4">{{ $t('drama.cycle') }}</text>
                </view>
                <text class="font_2 text_5 ml-9">{{ badgeDetail.showTaskDays }} {{ $t('common.days') }}</text>
              </view>
              <text class="font_3 text_6">{{ $t('common.current') }}:{{ (badgeDetail.highReturnProbability * 100).toFixed(2) }}%</text>
            </view>
          </view>
        </view>

        <!-- 今日任务 -->

        <view class="flex-row justify-between items-center section_7">
          <view class="flex-row items-baseline">
            <text class="font_3">{{ $t('drama.todayTask') }}</text>
            <text class="ml-8 font_3 text_7"></text>
          </view>
          <!-- <image class="image_6" src="@/static/common/i-doTask.png" @click="handleTask" /> -->
          <text class="image_6" :class="{ image6_select: judgeIsSelected() }" @click="handleTask">{{ $t('drama.doTask') }}</text>
        </view>
      </view>
    </view>
    <view class="flex-col relative section_8">
      <view class="flex-row justify-between group_2">
        <text class="font_2 text_8">{{ $t('drama.completeDays') }}: {{ items.length }}</text>
        <text class="font_2 text_9">{{ $t('drama.remainDays') }}: {{ badgeDetail.showTaskDays - items.length }}</text>
      </view>
      <view class="flex-col justify-start items-start divider"><view class="section_9" :style="{ width: (items.length / badgeDetail.showTaskDays) * 100 + '%' }"></view></view>
      <view class="flex-col section_10 gap-0.5">
        <view class="flex-row justify-between">
          <view class="flex-row mt-12">
            <text class="font_4">{{ $t('drama.cost') }}:</text>
            <text class="ml-4 font">{{ badgeDetail.coinUAndSdt }}</text>
          </view>
        </view>
        <view class="flex-row justify-between">
          <view class="flex-row mt-12">
            <text class="font_4">{{ $t('drama.diamond') }}:</text>
            <text class="font ml-3">{{ badgeDetail.relIntegral }}</text>
          </view>
        </view>
        <view class="mt-16 flex-col">
          <view class="flex-row justify-between mt-12 list-item" v-for="(item, index) in items" :key="index">
            <text class="font_5">{{ item.date }}</text>
            <text class="font_6">+{{ item.advertisementIntegral }} MSDT</text>
          </view>
        </view>
      </view>
    </view>
    <upgradeModal :isShowModal="isShowUpgradeModal" class="upgradeModal" @close="handleModalClose" :taskDay="badgeDetail.showTaskDays"></upgradeModal>
  </view>
</template>

<script>
import upgradeModal from './upgradeModal.vue';
import Config from '@/utils/config.js';
import md5 from 'js-md5';
import { getBadgeDetailAPI, getUserBadgeInfoAPI, fulfilTaskAPI } from '@/service/index.js';
import dayjs from 'dayjs';
export default {
  components: {
    upgradeModal
  },
  props: {},
  data() {
    return {
      items: [],
      sourceId: null,
      badgePeriodId: null,
      badgeDetail: {},
      isShowUpgradeModal: false
    };
  },
  onLoad(options) {
    this.sourceId = options.sourceId;
    this.badgePeriodId = options.badgePeriodId;
    this.getBadgeDetailAPI(options.badgePeriodId);
    this.getUserBadgeInfo(this.sourceId);
  },
  methods: {
    async getUserBadgeInfo(sourceId) {
      const res = await getUserBadgeInfoAPI({ sourceId: sourceId });
      res.data.sort(function (a, b) {
        return b.id - a.id;
      });
      this.items = res.data;
    },
    async getBadgeDetailAPI(badgePeriodId) {
      const res = await getBadgeDetailAPI(badgePeriodId);
      this.badgeDetail = res.data;
      console.log('eeee', this.badgeDetail);
    },
    async handleTask() {
      if (this.judgeIsSelected()) return;
      let taskParam = {};
      taskParam.taskId = 1;
      taskParam.sourceId = this.sourceId;
      taskParam.timestamp = Date.parse(new Date());
      const token = uni.getStorageSync(Config.storage.token);
      const authorization = `${Config.http.tokenPrefix}${token}`;
      taskParam.sign = md5(taskParam.timestamp + authorization + 'MINIFLIX');
      const res = await fulfilTaskAPI(taskParam);
      location.reload();
    },
    backToDrama() {
      uni.switchTab({
        url: '/pages/drama/index'
      });
    },
    handleModalClose() {
      this.isShowUpgradeModal = false;
    },
    openUpGradeModal() {
      this.isShowUpgradeModal = true;
    },
    judgeIsSelected() {
      const currentDays = dayjs(new Date()).format('YYYY-MM-DD');
      if (this.items.length) {
        return this.items[0].date === currentDays;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}
.ml-9 {
  margin-left: 0.56rem;
}
.ml-3 {
  margin-left: 0.19rem;
}
.page {
  padding-bottom: 2.06rem;
  background-color: #140c2b;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .section {
    background-image: url('@/static/common/b-home.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .section_2 {
      padding-bottom: 16.81rem;
      background-image: linear-gradient(180deg, #140c2b99 0%, #140c2b 100%);
      .section_3 {
        padding: 0.5rem 0.94rem 0.5rem 2.25rem;
        background-color: #33333300;
        .image {
          width: 1.06rem;
          height: 0.56rem;
        }
        .image_2 {
          width: 0.94rem;
          height: 0.56rem;
        }
        .image_3 {
          width: 1.5rem;
          height: 0.71rem;
        }
      }
      .section_4 {
        padding: 1rem 1rem 0.75rem;
        background-color: #140c2b00;
        .image_4 {
          border-radius: 0.5rem;
          width: 1.78rem;
          height: 1.78rem;
        }
        .pos {
          position: absolute;
          left: 0.98rem;
          top: 50%;
          transform: translateY(-50%);
        }
        .text {
          color: #ffffff;
          font-size: 1.13rem;
          font-family: PingFang SC;
          line-height: 1.06rem;
        }
        .text-wrapper {
          padding: 0.63rem 0 0.38rem;
          background-color: #0000004d;
          border-radius: 0.5rem;
          backdrop-filter: blur(0.38rem);
          width: 4.91rem;
          border-left: solid 0.031rem #00f6ff33;
          border-right: solid 0.031rem #00f6ff33;
          border-top: solid 0.031rem #00f6ff33;
          border-bottom: solid 0.031rem #00f6ff33;
          .text_2 {
            color: transparent;
            line-height: 0.7rem;
            background-image: linear-gradient(113.6deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
            -webkit-background-clip: text;
          }
        }
        .pos_2 {
          position: absolute;
          right: 0.98rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .section_5 {
        margin: 0.75rem 1rem 0;
        padding: 1.75rem 3.13rem 1.13rem;
        filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
        background-image: url('@/static/common/b-blage.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .image_5 {
          border-radius: 0.5rem;
          filter: drop-shadow(0rem 0.75rem 0.75rem #00000080);
          width: 15.19rem;
          height: 15.19rem;
        }
        .group {
          padding: 0 0.5rem;
          .text_3 {
            line-height: 1.02rem;
          }
          .section_6 {
            background-color: #ffffff1a;
            border-radius: 0.63rem 0rem 0.25rem 0.63rem;
            width: 6.81rem;
            height: 1.5rem;
            .text-wrapper_2 {
              padding: 0.5rem 0 0.25rem;
              background-image: linear-gradient(105.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
              border-radius: 0.25rem 0rem 0rem 0rem;
              width: 2.75rem;
              height: 1.5rem;
              .text_4 {
                line-height: 0.69rem;
              }
            }
            .text_5 {
              line-height: 0.69rem;
            }
          }
          .text_6 {
            color: #00f6ff;
            line-height: 0.74rem;
          }
        }
      }
      .section_7 {
        margin: 1rem 1rem 0;
        padding: 0.75rem;
        .text_7 {
          line-height: 0.93rem;
        }
        .image_6 {
          width: 5.13rem;
          height: 1.5rem;
          background-color: linear-gradient(307.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
          border-radius: 0.5rem;
          color: #ffffff;
          text-align: center;
        }
        .image6_select {
          background-color: #ffffff80 !important;
        }
      }
      .font_3 {
        font-size: 1rem;
        font-family: PingFang SC;
        line-height: 0.93rem;
        color: #ffffff;
      }
    }
  }
  .section_8 {
    margin: -15.81rem 1rem 0;
    border-radius: 0.75rem;
    .group_2 {
      padding: 1rem 0.63rem 0.63rem 0.75rem;
      .text_8 {
        line-height: 0.69rem;
      }
      .text_9 {
        color: #ffffff80;
        line-height: 0.69rem;
      }
    }
    .divider {
      margin: 0 0.75rem;
      background-color: #ffffff33;
      border-radius: 0.75rem;
      .section_9 {
        background-image: linear-gradient(172.8deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
        border-radius: 0.75rem;
        height: 0.25rem;
      }
    }
    .section_10 {
      margin-top: 1.25rem;
      padding: 1rem 0.75rem 0.75rem;
      background-color: #ffffff1a;
      border-radius: 0.75rem;
      .font_4 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff80;
      }
      .list-item {
        padding: 1.25rem 0.75rem;
        background-color: #ffffff26;
        border-radius: 0.5rem;
        &:first-child {
          margin-top: 0;
        }
        .font_5 {
          font-size: 0.88rem;
          font-family: PingFang SC;
          line-height: 0.65rem;
          color: #ffffff;
        }
        .font_6 {
          font-size: 0.88rem;
          font-family: PingFang SC;
          line-height: 0.65rem;
          color: #00f6ff;
        }
      }
    }
  }
  .font_2 {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.65rem;
    color: #ffffff;
  }
  .font {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.56rem;
    color: #ffffff;
  }
}
</style>
